{% extends "base.html" %}
{% block main %}
<div class="columns is-multiline">
  <div class="column is-half uniform-height" >
    <div class="card is-shadowless">
      <header class="card-header is-shadowless">
        <p class="card-header-title">
          <img class="image is-32x32" src="/static/images/apple_logo.png" alt="mi_logo">
          <span>&nbsp;&nbsp;iPhone 11</span>
        </p>
        <p class="card-header-icon">
          <span>于2019年9月11号发布, 在产品定位上是iPhone XR的下一代续作</span>
        </p>
      </header>
      <div class="card-image">
        <div class="columns">
          <div class="column is-half">
            <img src="/static/images/iPhone11_1.png" alt="iPhone11_1">
          </div>
          <div class="column is-half">
            <img src="/static/images/iPhone11_2.png" alt="iPhone11_2">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column is-half uniform-height" id="total" ></div>
  <div class="column is-full uniform-height" id="model_count"></div>
  <div class="column is-half uniform-height" id="color_count"></div>
  <div class="column is-half uniform-height" id="rom_count"></div>
  <div class="column is-half is-offset-3 uniform-height" id="user_device_count"></div>
</div>
{% endblock %}

{% block js %}
<script>
document.getElementById("iPhone11_sales_url").classList.add("is-active");
document.getElementById("page_title").innerText = "iPhone 11 销售数据";
</script>

<script>
// 数据源总览多Y轴柱状图
let total_dom = document.getElementById("total");
let total_chart = echarts.init(total_dom);
let total_option = {
  title: {
    text: "电商数据源总览"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross"
    }
  },
  grid: {
    right: "20%"
  },
  legend: {
    data: ["销量(基于评论总数)", "好评率"]
  },
  xAxis: [
    {
      type: "category",
      axisPointer: {
        type: "shadow"
      },
      data: {{ total_source | tojson }}
    }
  ],
  yAxis: [
    {
      type: "value",
      name: "销量(基于评论总数)",
      position: "left",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#5470C6"
        }
      },
      axisLabel: {
        formatter: "{value} 万部"
      }
    },
    {
      type: "value",
      name: "好评率",
      min: 0,
      max: 100,
      position: "right",
      offset: 40,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#91CC75"
        }
      },
      axisLabel: {
        formatter: "{value} %"
      }
    },
  ],
  series: [
    {
      name: "销量(基于评论总数)",
      type: "bar",
      data: {{ total_count | tojson }}
    },
    {
      name: "好评率",
      type: "bar",
      yAxisIndex: 1,
      data: {{ total_good_rate | tojson }}
    }
  ]
};
total_chart.setOption(total_option);
</script>

<script>
// 各型号数据总览多Y轴柱状图
let model_count_dom = document.getElementById("model_count");
let model_count_chart = echarts.init(model_count_dom);
let model_count_option = {
  title: {
    text: "各型号数据总览",
    left: "5%"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross"
    }
  },
  grid: {
    left: "5%",
    right: "10%"
  },
  legend: {
    data: ["百分比", "好评率"]
  },
  xAxis: [
    {
      type: "category",
      axisPointer: {
        type: "shadow"
      },
      data: {{ mc_name | tojson }},
      axisLabel: {
        interval: 0,
        textStyle: {
          fontSize: 24,
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      name: "百分比",
      position: "left",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#5470C6"
        }
      },
      axisLabel: {
        formatter: "{value} %",
        textStyle: {
          fontSize: 24,
        }
      }
    },
    {
      type: "value",
      name: "好评率",
      min: 0,
      max: 100,
      position: "right",
      offset: 40,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#91CC75"
        }
      },
      axisLabel: {
        formatter: "{value} %"
      }
    },
  ],
  series: [
    {
      name: "百分比",
      type: "bar",
      data: {{ mc_per | tojson }}
    },
    {
      name: "好评率",
      type: "bar",
      yAxisIndex: 1,
      data: {{ mc_good_rate | tojson }}
    }
  ]
};
model_count_chart.setOption(model_count_option);
</script>

<script>
// 机身颜色百分比饼图
let color_count_dom = document.getElementById("color_count");
let color_count_chart = echarts.init(color_count_dom);
let color_count_option = {
  title: {
    text: "不同机身颜色占总销量的百分比",
    left: "center"
  },
  tooltip: {
    trigger: "item"
  },
  legend: {
    orient: "vertical",
    left: "left",
    textStyle: {
      fontSize: 16,
    }
  },
  series: [
    {
      name: "机身颜色",
      type: "pie",
      radius: "50%",
      data: {{ color_count | tojson }}.sort(function (a, b) {return b.value - a.value}),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      },
      label: {
        textStyle: {
          fontSize: 16,
        }
      }
    }
  ]
};
color_count_chart.setOption(color_count_option);
</script>

<script>
// 储存容量百分比饼图
let rom_count_dom = document.getElementById("rom_count");
let rom_count_chart = echarts.init(rom_count_dom);
let rom_count_option = {
  title: {
    text: "不同储存(ROM)容量占总销量的百分比",
    left: "center"
  },
  tooltip: {
    trigger: "item"
  },
  legend: {
    orient: "vertical",
    left: "left",
    textStyle: {
      fontSize: 16,
    }
  },
  series: [
    {
      name: "储存容量",
      type: "pie",
      radius: "50%",
      data: {{ rom_count | tojson }}.sort(function (a, b) {return b.value - a.value}),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      },
      label: {
        textStyle: {
          fontSize: 16,
        }
      }
    }
  ]
};
rom_count_chart.setOption(rom_count_option);
</script>

<script>
// 用户设备类型统计饼图
let udc_dom = document.getElementById("user_device_count");
let udc_chart = echarts.init(udc_dom);
let udc_option = {
  title: {
    text: "用户设备类型统计",
    subtext: "(京东+苏宁数据)",
    left: "center"
  },
  tooltip: {
    trigger: "item"
  },
  legend: {
    orient: "vertical",
    left: "left",
    textStyle: {
      fontSize: 16,
    }
  },
  series: [
    {
      name: "评论数量占比",
      type: "pie",
      radius: "50%",
      data: {{ udc_per | tojson }}.sort(function (a, b) {return b.value - a.value}),
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      },
      label: {
        textStyle: {
          fontSize: 16,
        }
      }
    }
  ]
};
udc_chart.setOption(udc_option);
</script>
{% endblock %}